<template>
  <Dialog :title="isReadonly ? '查看转账凭证' : '上传转账凭证'" v-model="dialogVisible" width="500px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="转账凭证：" prop="transferVoucher">
        <UploadImg v-if="!isReadonly" v-model="formData.transferVoucher" />
        <div v-if="isReadonly && formData.transferVoucher">
          <el-image 
            :src="formData.transferVoucher" 
            style="width: 200px; height: 200px"
            :preview-src-list="[formData.transferVoucher]"
            fit="cover"
          />
        </div>
      </el-form-item>
      
      <el-form-item label="转账时间" prop="transferTime">
        <el-date-picker
          v-model="formData.transferTime"
          type="datetime"
          placeholder="请选择时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          class="!w-full"
          :disabled="isReadonly"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="dialogVisible = false">{{ isReadonly ? '关闭' : '取消' }}</el-button>
      <el-button v-if="!isReadonly" @click="submitForm" type="primary" :disabled="formLoading">确定转账</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import * as StoreCommissionWithdrawApi from '@/api/mall/trade/store/commission-withdraw'
import dayjs from 'dayjs'

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const isReadonly = ref(false) // 是否只读模式
const formData = ref({
  id: undefined,
  transferVoucher: '',
  transferTime: ''
})

const formRules = reactive({
  transferVoucher: [{ required: true, message: '请上传转账凭证', trigger: 'blur' }]
})

const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (row: any, readonly = false) => {
  dialogVisible.value = true
  isReadonly.value = readonly
  resetForm()
  formData.value.id = row.id
  
  // 如果是只读模式，需要获取详情数据
  if (readonly) {
    await loadTransferDetails(row.id)
  }
}

/** 加载转账详情 */
const loadTransferDetails = async (id: number) => {
  try {
    formLoading.value = true
    const data = await StoreCommissionWithdrawApi.getStoreCommissionWithdraw(id)
    formData.value.transferVoucher = data.transferVoucher || ''
    // 使用 dayjs 处理时间显示
    if (data.transferTime) {
      if (isNaN(Number(data.transferTime))) {
        // 如果不是纯数字，直接使用
        formData.value.transferTime = data.transferTime
      } else {
        // 如果是时间戳，使用 dayjs 转换为本地时间格式
        formData.value.transferTime = dayjs(Number(data.transferTime)).format('YYYY-MM-DD HH:mm:ss')
      }
    } else {
      formData.value.transferTime = ''
    }
  } finally {
    formLoading.value = false
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
  
  // 提交请求
  formLoading.value = true
  try {
    // 使用 dayjs 将时间转换为时间戳字符串
    const transferTimeStamp = formData.value.transferTime 
      ? dayjs(formData.value.transferTime).valueOf().toString() 
      : undefined
      
    await StoreCommissionWithdrawApi.confirmTransferSuccess({
      id: formData.value.id,
      transferVoucher: formData.value.transferVoucher,
      transferTime: transferTimeStamp
    })
    message.success('转账凭证上传成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    transferVoucher: '',
    transferTime: ''
  }
  formRef.value?.resetFields()
}
</script> 
